∏%Macintosh Human Interface GuidelinesContentsFigures and TablesAbout This BookWho Should Read This Book2What’s New in Macintosh Human Interface From AppleAbout Making It MacintoshWhat’s in This BookThe Basic PhilosophyThe Interface Elements
Appendixes Visual Cues Used in This Book FundamentalsHuman Interface Principles%The Human Interface Design Principles MetaphorsDirect Manipulation Figure 1-1 Direct manipulationSee-and-Point Consistency&WYSIWYG (What You See Is What You Get) User ControlFeedback and DialogJFigure 1-2 An example of a bad message and an example of a helpful message ForgivenessPerceived StabilityAesthetic Integrity/Figure 1-3 Don’t use arbitrary graphic elements Modelessness Additional Issues to ConsiderKnowledge of Your AudienceAccessibility General Design ConsiderationsWorldwide CompatibilityCultural Values ResourcesLanguage Differences+Figure 2-1 Menu bars in different languages Text Display and Text Editing'Default Alignment of Interface Elements*Figure 2-2 English and Arabic dialog boxesZFigure 2-3 Dialog boxes with display rectangles that are different sizes and the same size7Figure 2-4 Right-to-left alignment of dialog box items
Keyboards Figure 2-5 The Keyboard menu Fonts#Figure 2-6 The boundaries of a fontUniversal Access"People With a Physical Disability People With a Visual Disability People With a Hearing Disability"Figure 2-7 The Sound control panel+People With a Speech or Language Disability People With a Seizure DisorderCollaborative ComputingConcern for Other Users Figure 2-8 A shutdown messageUser IdentificationAccess Privileges Passwords,Figure 2-9 The AppleShare connect dialog box Data Encryption for SecurityClear Communications$Displaying the Current State of Data%Communicating With Other EnvironmentsNetwork Transparency2Human Interface Design and the Development ProcessDesign Decisions%Features Inspired by Market PressuresFeature CascadeThe 80 Percent SolutionManaging Complexity Using Progressive Disclosure"Figure 3-1 An expanding dialog box)Figure 3-2 Directions a window can expandImplementing PreferencesExtending the Interface When to Go Beyond the Guidelines Build on the Existing Interface.Don’t Assign New Behaviors to Existing Objects,Figure 3-3 An incorrect subpalette indicator(Figure 3-4 A better subpalette indicator)Create a New Interface Element Cautiously%Involving Users in the Design ProcessDefine Your AudienceAnalyze TasksBuild PrototypesObserve Users+Ten Steps for Conducting a User ObservationThe Interface ElementsMenus(Figure 4-1 The standard order of actions The Menu BarFigure 4-2 A menu barFigure 4-3 Three menu bars/Figure 4-4 The Finder menu bar in six languages Figure 4-5 An unavailable menuMenu BehaviorFigure 4-6 Opening a menu Figure 4-7 A feedback techniqueMenu ElementsFigure 4-8 A typical menuMenu Item Names!Figure 4-9 A menu with adjectives.Figure 4-10 Command names properly capitalized0Figure 4-11 Unavailable items aren’t highlightedGrouping Items in Menus)Figure 4-12 Menus with appropriate groups#Figure 4-13 Grouping items in menusMenu Dividers"Figure 4-14 Standard menu dividers)Figure 4-15 An inappropriate menu divider+Standard Characters and Text Style in Menus4Figure 4-16 A menu with text styles and an indicator Checkmarks and Dashes in MenusJFigure 4-17 A checkmark to indicate a choice in a mutually exclusive groupOFigure 4-18 A checkmark to indicate a choice in an accumulating attribute groupTFigure 4-19 Dashes to indicate partial attributes in an accumulating attribute group)Figure 4-20 Several attributes in effect The Ellipsis Character in MenusEFigure 4-21 The ellipsis character means more information is requiredaFigure 4-22 Don’t use the ellipsis character with a command that doesn’t require more informationXFigure 4-23 The absence of the ellipsis character means no more information is requiredDFigure 4-24 The ellipsis character doesn’t mean an alert box appears&A Diamond Mark in the Application Menu;Figure 4-25 The Application menu with a notification symbol Avoid Nonstandard Marks in Menus0Figure 4-26 Don’t use arbitrary symbols in menusText Styles in Menus)Figure 4-27 A Style menu with text styles>Figure 4-28 The effects of the two states of a Style menu itemhFigure 4-29 A menu with nonstandard marks and extraneous text styles and a menu all in plain text style Toggled Menu Items'Figure 4-30 A set of toggled menu items9Figure 4-31 A single toggled menu item whose name changes+Figure 4-32 An ambiguous toggled menu item ?Figure 4-33 An incorrect use of a checkmark to indicate a stateScrolling Menus Figure 4-34 A scrolling menu5Figure 4-35 The menu scrolling in the other directionHierarchical Menus Figure 4-36 A hierarchical menu,Figure 4-37 Don’t use submenus unnecessarilyIFigure 4-38 A menu bar on a 9-inch screen with space for more menu titles&Figure 4-39 Examples of submenu titles1Figure 4-40 Avoid more than one level of submenus Pop-Up Menus'Figure 4-41 A pop-up menu and its parts!Figure 4-42 Opening a pop-up menu-Figure 4-43 Pop-up menus versus radio buttons*Figure 4-44 Pop-up menus versus checkboxes/Figure 4-45 Don’t use pop-up menus for commandsStandard Pop-Up Menus"Figure 4-46 A standard pop-up menu Figure 4-47 Using a pop-up menu>Figure 4-48 Correct and incorrect use of fonts in pop-up menus Figure 4-49 Pop-up menu behavior Figure 4-50 A hidden pop-up menuType-In Pop-Up Menus!Figure 4-51 A type-in pop-up menu:Figure 4-52 A type-in pop-up menu with user’s choice addedTear-Off Menus and Palettes/Figure 4-53 A tools palette and a color paletteTear-Off Menus!Figure 4-54 Using a tear-off menu7Figure 4-55 A tear-off menu on top of a document windowPalettes!Figure 4-56 Palettes and feedback:Figure 4-57 A tool palette with the corresponding pointers&Figure 4-58 A tool palette in a windowStandard Macintosh MenusThe Apple MenuFigure 4-59 An Apple menuAbout2Figure 4-60 An About dialog box for an application File MenuFigure 4-61 A File menu NewFigure 4-62 The New commandOpen:Figure 4-63 The standard file dialog box for opening filesClose&Figure 4-64 The save changes alert box>Figure 4-65 The correct location of the save changes alert boxSave Figure 4-66 The Save command9Figure 4-67 A sample alert box to use when a disk is fullSave As.Figure 4-68 The Save As command and dialog boxRevert Figure 4-69 The Revert command Page Setup…#Figure 4-70 A Page Setup dialog boxPrint… Figure 4-71 A Print dialog boxQuitThe Edit Menu3Figure 4-72 A standard Edit menu for an application,Figure 4-73 Adding commands to the Edit menu<Figure 4-74 A sample Edit menu with Edition Manager commandsIFigure 4-75 A sample hierarchical Edit menu with Edition Manager commandsThe ClipboardFigure 4-76 The Clipboard Undo/Redo&Figure 4-77 The Undo and Redo commandsCutCopyPaste2Figure 4-78 The results of using the Paste commandClear
Select All Show Clipboard/Hide ClipboardCreate Publisher…7Figure 4-79 The Create Publisher command and dialog boxSubscribe To…3Figure 4-80 The Subscribe To command and dialog box Publisher/Subscriber Options…,Figure 4-81 The Publisher Options dialog box-Figure 4-82 The Subscriber Options dialog boxThe Font MenuFigure 4-83 A Font menu8Figure 4-84 Don’t combine the Font menu with other menusThe Size MenuFigure 4-85 A Size menuAFigure 4-86 A sample pull-down Size menu and font size dialog boxThe Style MenuFigure 4-87 A Style menuThe Help MenuFigure 4-88 The Help menuThe Keyboard Menu Figure 4-89 The Keyboard menuThe Application MenuKeyboard Equivalents=Table 4-1 Apple-reserved keyboard equivalents for all systemsHTable 4-2 Additional reserved keyboard equivalents for worldwide systems;Table 4-3 Common keyboard equivalents that are not reservedWindows'Figure 5-1 Examples of standard windowsWindow AppearanceDocument Window Controls)Figure 5-2 Standard document window partsUse of Color in Windows$Figure 5-3 Windows on a color screen.Figure 5-4 Standard window components in color6Figure 5-5 Colors that the user can choose for windowsUtility WindowsFigure 5-6 A utility window/Figure 5-7 Make it clear where text will appearWindow BehaviorsThe Active Window Figure 5-8 The active window7Figure 5-9 Don’t show a selection in an inactive windowOpening WindowsEFigure 5-10 Appropriate window titles for a series of unnamed windows;Figure 5-11 Examples of correct and incorrect window titlesWindow Display OrderGFigure 5-12 Display order of document windows and modeless dialog boxes2Figure 5-13 Adding floating windows to the desktop<Figure 5-14 Adding a movable modal dialog box to the desktopWindow Positions'The Default Position on a Single Screen/Figure 5-15 Window positions on a single screen@Figure 5-16 The standard window position on two sizes of screens(The Default Position on Multiple Screens<Figure 5-17 The standard window position on multiple screens1Figure 5-18 A window displayed across two screens"Dialog Box and Alert Box Positions-Figure 5-19 Standard position of an alert boxHFigure 5-20 Alert box position in relation to the active document windowAFigure 5-21 Standard alert box position with more than one screenClosing a WindowFigure 5-22 The close box&Figure 5-23 The save changes alert boxMoving a WindowFigure 5-24 Moving a window Changing the Size of a Window7Figure 5-25 Multiple monitors and conceptual work space#Figure 5-26 A window growing largerScrolling a Window8Figure 5-27 Relationship between a window and a document Scroll Bars(Figure 5-28 The elements of a scroll bar2Figure 5-29 Using scroll arrows and the scroll boxIFigure 5-30 Inactive scroll bars in active and inactive document windows ?Figure 5-31 Background between the content and the window frame9Figure 5-32 Acceptable additions to the scroll bar region/Figure 5-33 Too many controls in the scroll bar Scrolling With the Scroll Arrows0Figure 5-34 Scrolling by clicking a scroll arrow Scrolling With the Gray Area2Figure 5-35 Scrolling by clicking in the gray area$Scrolling by Dragging the Scroll Box0Figure 5-36 Scrolling by dragging the scroll boxAutomatic Scrolling Figure 5-37 Automatic scrolling The Zoom Box and Window BehaviorFigure 5-38 The zoom box?Figure 5-39 The standard state and the user state of a documentSplitting a WindowFigure 5-40 A split window Figure 5-41 Split bar sizeWindow Pane Behavior<Figure 5-42 Independent and locked scrolling of window panesOne Split per Orientation Dialog Boxes'Figure 6-1 Examples of dialog box typesModeless Dialog Boxes(Figure 6-2 A typical modeless dialog box)Figure 6-3 Two open modeless dialog boxes Modeless Dialog Box Appearance:Figure 6-4 The essential elements of a modeless dialog boxDFigure 6-5 Incorrect absence of a close box in a modeless dialog box Modeless Dialog Box BehaviorsMenu Bar Access*Accepting Changes in a Modeless Dialog BoxCompleting CommandsVFigure 6-6 Provide a place for the user to enter information in a modeless dialog boxMovable Modal Dialog Boxes-Figure 6-7 A typical movable modal dialog box#Movable Modal Dialog Box Appearance?Figure 6-8 The essential elements of a movable modal dialog boxCFigure 6-9 Close box used incorrectly in a movable modal dialog box"Movable Modal Dialog Box Behaviors-Figure 6-10 A Finder movable modal dialog boxMenu Bar AccessDFigure 6-11 Menu bar access while a movable modal dialog box is openModal Dialog Boxes,Figure 6-12 An example of a modal dialog box Figure 6-13 A status dialog boxModal Dialog Box Appearance8Figure 6-14 The essential elements of a modal dialog boxModal Dialog Box BehaviorsMenu Bar AccessFFigure 6-15 Access to the Edit menu when displaying a modal dialog boxStacking Modal Dialog Boxes7Figure 6-16 Second modal dialog box on top of first one Alert BoxesAlert Box Appearance2Figure 6-17 The essential elements of an alert boxNote Alert Boxes*Figure 6-18 An example of a note alert boxCaution Alert Boxes-Figure 6-19 An example of a caution alert boxStop Alert Boxes*Figure 6-20 An example of a stop alert boxBasic Dialog Box LayoutMFigure 6-21 Recommended spacing of buttons and text in dialog and alert boxes#Keyboard Navigation in Dialog Boxes$Figure 6-22 An active scrolling listDialog Box Messages-Figure 6-23 A well-written dialog box messageStandard File Dialog Boxes:Figure 6-24 The standard file dialog box for opening filesSave Changes Alert Box&Figure 6-25 The save changes alert boxControlsStandard Toolbox ControlsButtons"Figure 7-1 Buttons in a dialog boxButton Behavior Figure 7-2 A highlighted button Button Names2Figure 7-3 A dialog box with OK and Cancel buttonsBFigure 7-4 A dialog box with a Done button instead of an OK button7Figure 7-5 A progress indicator that uses a Stop buttonCFigure 7-6 A confirmation alert box with appropriately named buttonRadio Buttons Figure 7-7 Sets of radio buttons<Figure 7-8 Radio buttons for selecting the alignment of text%Figure 7-9 The General Controls panel
Checkboxes Figure 7-10 A set of checkboxes-Figure 7-11 A single checkbox in a dialog box Figure 7-12 The Find dialog box/Controls Not Supported by the Macintosh ToolboxSliders"Figure 7-13 An example of a slider/Figure 7-14 A slider with direction informationHFigure 7-15 Incorrect use of a scroll bar and correct use of a slider Little Arrows!Figure 7-16 Little arrows control'Figure 7-17 Content-dependent incrementOutline Triangles%Figure 7-18 Outline triangle control #Other Elements for User InteractionText Entry Fields Figure 7-19 A text entry fieldScrolling Lists Figure 7-20 A scrolling listIconsFigure 8-1 Common iconsWhy Icons Work-Figure 8-2 Examples of common traffic symbols:Figure 8-3 Examples of commonly-used international symbolsBFigure 8-4 Symbols are easier to understand than keyboard commands(Figure 8-5 Grouping icons on the desktopLimitations of Icons Figure 8-6 A confusing image&Figure 8-7 Context clarifies the image Figure 8-8 Icons with label textDesigning Effective IconsUse Appropriate Metaphors.Figure 8-9 A logical and an illogical metaphor#Think About Worldwide Compatibility#Figure 8-10 Localized mailbox iconsAvoid Text in Icons Figure 8-11 Avoid text in icons Design for the Macintosh Display*Figure 8-12 Certain shapes don’t work well Use a Consistent Light Source%Figure 8-13 A consistent light source&Figure 8-14 Inconsistent light sources Optimize for Your Target Display:Maintain a Consistent Visual Appearance in an Icon FamilyLFigure 8-15 Design the large icon first and base the small icon design on it Use Icon Elements Consistently+Figure 8-16 Consistent use of icon elementsThe Finder Icon Family Figure 8-17 An icon family$Figure 8-18 Different sizes of icons:Table 8-1 Icon display on monitors of different bit depthsAn Icon Design ProcessBlack-and-White Icons9Figure 8-19 A well-designed icon and its selected version;Figure 8-20 A poorly designed icon and its selected version Color Icons&Figure 8-21 Icons with a black outline)Figure 8-22 Icons without a black outline Icon ColorsThe Apple Icon Color Set>Figure 8-23 Standard 256-color palette with icon colors marked3Figure 8-24 An example of dithered color in an icon,Degradation of the Color Set Across Monitors#Selection Mechanism for Color Icons1Figure 8-25 Color icons and their selected states(Color Labeling Mechanism for Color Icons6Figure 8-26 Color icons and their color-labeled statesAnti-Aliasing!Figure 8-27 Correct anti-aliasing Small Icons-Figure 8-28 Consistently designed small icons/Figure 8-29 Inconsistently designed small iconsDefault and Custom IconsApplication Icons %Figure 8-30 Default application icons$Figure 8-31 Custom application icons-Figure 8-32 Examples of bad application iconsDocument Icons#Figure 8-33 Default document icons LFigure 8-34 Application icon and document icon with the same graphic element=Figure 8-35 Acceptable and unacceptable custom document icons0Figure 8-36 Document icons with standard symbolsStationery Pad Icons(Figure 8-37 Default stationery pad iconsQuery Document Icons(Figure 8-38 Default query document iconsEdition Icons!Figure 8-39 Default edition iconsPreferences Icons"Figure 8-40 Preferences file iconsExtension Icons#Figure 8-41 Default extension icons%Figure 8-42 Examples of Chooser iconsControl Panel Icons-Figure 8-43 Icons for the Color control panelMovable Resource IconsFigure 8-44 Font iconsFigure 8-45 A sound iconKeyboard Icons>Figure 8-46 The default keyboard layout and input method icons&Figure 8-47 Examples of keyboard iconsAFigure 8-48 Examples of modification indicators on keyboard icons<Table 8-2 Pattern substitutions for colors in keyboard iconsDFigure 8-49 Enlarged keyboard icons with correct color substitutionsColor+Color Design of Standard Interface ElementsWindows and Dialog Boxes Figure 9-1 A colorized window/Figure 9-2 A colorized movable modal dialog boxMenusPointersHighlighting and Selection Color Application Guidelines%Match Complexity to the Level of User5Figure 9-3 Color palette and custom color mixing toolDesign for the Macintosh Design for Black and White First5Figure 9-4 Design for black-and-white monitors first?Figure 9-5 Don’t mimic color effects in black-and-white designsLimit the Number of Colors&Figure 9-6 A limited palette of colorsColors on GrayBeware of BlueSmall Objects"Color for Categorizing Information BehaviorsThe Pointing Device&Figure 10-1 Different pointing devices/Figure 10-2 The insertion point and the pointerTable 10-1 Pointers Figure 10-3 A status indicatorMouse ActionsClicking Figure 10-4 Clicking a button Double-Clicking,Figure 10-5 Double-clicking to select a wordPressing#Figure 10-6 Pressing a scroll arrowDragging&Figure 10-7 Dragging to move an object The KeyboardCharacter KeysEnterTab5Figure 10-8 Using the Tab key to cycle through fieldsReturn<Figure 10-9 Using the Return key to move the insertion pointDelete (or Backspace)ClearEscape@Figure 10-10 A sample confirmation dialog box for the Escape keyModifier KeysShift Caps LockOption:Figure 10-11 Using Option-drag to make a copy of an objectCommandControlType-Ahead and Auto-RepeatInternational Keyboards
Arrow KeysFigure 10-12 Arrow keys#Appropriate Uses for the Arrow KeysMoving the Insertion Point-Moving the Insertion Point in Empty Documents#Using Modifier Keys With Arrow Keys[Table 10-2 How modifier keys change the movement of the insertion point with the arrow keysFunction Keys Figure 10-13 The function keysHelpForward Delete (Del)HomeEndPage Up Page Down Selecting0Figure 10-14 Three ways of selecting informationSelection Methods!Figure 10-15 Selection techniquesSelection by ClickingSelection by Dragging%Changing a Selection With Shift-Click5Figure 10-16 Expanding and shrinking a text selectionQFigure 10-17 Extending text selections using the addition and fixed-point methods'Changing a Selection With Command-Click4Figure 10-18 Discontinuous selection within an arraySelections in Text Figure 10-19 Text selectionsSelecting With the MouseSelecting Ranges Selecting With the Arrow Keys0Figure 10-20 Selecting with Shift and arrow keys7Figure 10-21 Selecting with Option-Shift and arrow keysSelections in Graphics;Figure 10-22 Selection in an object-based graphics document:Figure 10-23 Selection in a bitmap-based graphics document Selections in Arrays and Tables(Figure 10-24 Field selection in an array)Figure 10-25 Column selection in an array(Figure 10-26 Range selection in an array0Figure 10-27 Discontinuous selection in an array Editing TextInserting TextDeleting TextReplacing a SelectionIntelligent Cut and Paste&Figure 10-28 Intelligent cut and pasteEditing FieldsLanguageStyle Terminology Developer Terms and User Terms3Table 11-1 Translation chart for user documentation Terms That Are Often MisusedClickCheckboxDocumentFileUtility Window Labels for Interface Elements4Figure 11-1 Proper capitalization of screen elements Figure 11-2 Clear button namesDialog Box Messages.Figure 11-3 A poorly written alert box message)Figure 11-4 An improved alert box message,Figure 11-5 A well-written alert box messageEFigure 11-6 Correct absence of a colon to introduce a list of options"Figure 11-7 Correct use of a colonUser DocumentationOnline Help SystemsProvide Concurrent Help Provide Multiple Levels of Help)Assist Users by Answering Their Questions3Table 11-2 Categories of questions for help systemsKeep the Help System Simple*Design Online Help as an Interactive Coach Balloon HelpFigure 11-8 A help balloonWhen to Use a Help BalloonHow to Write a Balloon"Wording for Specific Balloon TypesButtons With Words%Figure 11-9 Help balloon for a button Menu Titles*Figure 11-10 Help balloon for a menu title
Menu Items)Figure 11-11 Help balloon for a menu itemRadio Buttons5Figure 11-12 Help balloon for a selected radio button
Checkboxes(Figure 11-13 Help balloon for a checkbox%Groups of Checkboxes or Radio Buttons7Figure 11-14 Help balloon for a group of radio buttons Tools in Palettes,Figure 11-15 Help balloon for a tool palette Window Parts Modal Dialog Box on the ScreenIconsFFigure 11-16 Help balloons for an application icon and a document iconText Entry Boxes.Figure 11-17 Help balloon for a text entry box
Appendixes Resources)Association for Computing Machinery (ACM)Communications of the ACMSIGCHISIGGRAPHCSCWHuman Factors Society$Human Factors Society Annual MeetingHuman Factors Human Factors Society BulletinApple Developer InformationAPDADeveloper Support Center In-House Development Supportdevelop Bibliography Animation&Cognitive Psychology and Human FactorsColorEnvironmental Design Graphic and Information DesignGraphic Design and DrawingIcons and Symbols
TypographyHistory of Human InterfaceHuman-Computer Design ConsistencyDirect ManipulationMenus MetaphorsProduct DesignUsability TestingUser-Centered DesignHuman-Computer InteractionLanguage ProgrammingSpecial ApplicationsCollaborative Computing Hypertext
